<template>
  <div>
    <el-table
      border
      :data="tableData"
      :key="apiTimes"
      :show-summary="!!this.sumList"
      :summary-method="getSummaries"
    >
      <el-table-column
        prop="userAccount"
        label="客户编号"
        align="center"
        min-width="100"
        fixed="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称"
        align="center"
        min-width="100"
        fixed="left"
        show-overflow-tooltip
      >
        <template v-slot="{row}">
          {{row.customerName || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="shipmentNo"
        label="货件单号"
        align="center"
        min-width="120"
        fixed="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="flReceivedTime"
        label="收货时间"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          {{formatDate(row.flReceivedTime, timeFormat)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="countryStr"
        label="目的地国家"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="transferTypeStr"
        label="收货渠道"
        align="center"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="goodsName"
        label="品名"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          {{row.goodsName || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="boxNum"
        label="箱数"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="weight"
        label="收货实重"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="volumeWeight"
        label="收货材积重"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="calWeight"
        label="收货计费重"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="squareNumber"
        label="方数"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="feeValue"
        label="应收合计"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          <template v-if="row.feeValue !== null">
            {{row.feeValue}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>

      <el-table-column
        v-for="item in agentList"
        :key="item.id"
        :prop="'costValueAgentId' + item.id"
        :label="item.nickname"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          <template v-if="row['costValueAgentId' + item.id] !== undefined">
            {{row['costValueAgentId' + item.id]}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>

      <el-table-column
        prop="costValue"
        label="成本合计"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          <template v-if="row.costValue !== null">
            {{row.costValue}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="gross"
        label="毛利"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          <template v-if="row.gross !== null">
            {{row.gross}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="grossRate"
        label="利润率%"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          <template v-if="row.grossRate !== null">
            {{row.grossRate}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="employeeAccount"
        label="销售员"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          {{row.employeeAccount || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="feeRemark"
        label="备注"
        align="center"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="{row}">
          {{row.feeRemark || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="制单时间"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          {{formatDate(row.createTime, timeFormat)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="receivedTime"
        label="到仓时间"
        align="center"
        min-width="100"
      >
        <template v-slot="{row}">
          {{formatDate(row.receivedTime, timeFormat)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="shipmentStatusStr"
        label="货件状态"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="feeStatusStr"
        label="状态"
        align="center"
        min-width="100"
        fixed="right"
      ></el-table-column>
      <el-table-column
        prop="op"
        label="操作"
        align="center"
        min-width="120"
        fixed="right"
      >
        <template v-slot="{row}">
          <template v-if="row.feeStatus === 'untreated'">
            <el-button type="primary" @click="showDialog(row)">导入应收</el-button>
          </template>
          <template v-else-if="row.feeStatus === 'wait_settle'">
            <el-button type="warning" @click="showDialog(row)">修改应收</el-button>
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialog"
      width="500px"
      :title="dialogForm.feeId ? '修改应收' : '导入应收'"
    >
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item
          label="应收合计"
          prop="feeValue"
        >
          <el-input-number
            v-model="dialogForm.feeValue"
            :min="0"
            :precision="2"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="feeRemark"
        >
          <el-input
            type="textarea"
            :autosize="{minRows: 2}"
            v-model="dialogForm.feeRemark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="submitDialog" :loading="dialogLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {formatDate} from "@/utils/common";
import request from "@/utils/request";

export default {
  name: "ShipmentDataTable",
  props: {
    tableData: {
      default: () => [],
      type: Array,
    },
    apiTimes: {
      default: 0,
      type: Number,
    },
    agentList: {
      default: () => [],
      type: Array,
    },
    sumList: {
      type: Object,
    }
  },
  data(){
    return {
      timeFormat: 'yyyy-MM-dd',
      dialog: false,
      dialogLoading: false,
      dialogForm: {
        shipmentId: '',
        feeValue: 0,
        feeRemark: '',
        feeId: '',
      },
      rules: {
        feeValue: [
          {required: true, message: '请填写应收合计', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    formatDate,
    showDialog(row){
      this.dialogForm.shipmentId = row.id
      this.dialogForm.feeValue = row.feeValue
      this.dialogForm.feeRemark = row.feeRemark
      this.dialogForm.feeId = row.feeId
      this.dialog = true
    },
    submitDialog(){
      this.$refs.dialogForm.validate(valid=>{
        if(valid){
          this.dialogLoading = true
          request({
            url: '/finance/saveShipmentFee',
            method: 'post',
            handleError: true,
            data: this.dialogForm
          })
            .then(res=>{
              this.dialogLoading = false
              if(res.error === 0){
                this.$sMsg(res.message)
                this.dialog = false
                this.$emit('changeData')
              }else{
                this.$eMsg(res.message)
              }
            })
        }
      })
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('table.sum');
          return;
        }
        const key = column.property;
        if(this.sumList[key]){
          sums[index] = this.sumList[key]
        }else{
          sums[index] = '-';
        }
      });
      return sums;
    },
  },
}
</script>


<style scoped lang="scss">

</style>
